<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    button#start {
      display:block;
    };
  </style>
  <script type="text/javascript" src="vue"></script>
  <script type="text/javascript" src="common.js"></script>
</head>
<body>
  <div id='web-demo'>
    <fieldset style="float:left;width:30%">
      <div v-if="sensorInfo.length > 0">
        <label>Presets</label>
        <select v-model="selection.selectedPreset">
          <option v-for="preset in presets">{{preset}}</option>
        </select></br></br>
        <div v-for="info in sensorInfo">
          <fieldset>
          <legend>{{info.name}}</legend>
          <label>Resolution</label>
          <select v-model="selection.selectedResolutions[info.name]">
            <option v-for="res in info.resolutions">{{res.w}}*{{res.h}}</option>
          </select></br>
          <label>Frame rate</label>
          <select v-model="selection.selectedFpses[info.name]">
            <option v-for="fps in info.fpses">{{fps}}</option>
          </select></br>
          <label>Availables streams:</label>
          <div v-for="stream in info.streams">
            <input type="checkbox" v-model="selection.selectedStreams[stream.name+(stream.name === 'infrared' ? stream.index : '')]">
            <label>{{stream.name + (stream.name === "infrared" ? stream.index : "")}}</label>
            <select v-model="selection.selectedFormats[stream.name+(stream.name === 'infrared' ? stream.index : '')]">
              <option v-for="format in stream.formats">{{format}}</option>
            </select>
          </div></br>
          <label>Controls
            <input type="checkbox" v-model="controls.enabled[info.name]">
          </label>
          <fieldset v-show="controls.enabled[info.name]">
            <div v-if="controls.options[info.name] && controls.options[info.name].options">
              <div v-for="option in controls.options[info.name].options">
                <label>{{option.option}}: {{option.value}}</label></br>
                <input type="range" v-bind:min="option.range.minValue" v-bind:max="option.range.maxValue" v-bind:step="option.range.step" v-model="option.value" v-on:input="onOptionChanged(info.name, option.option, option.value)">
              <div>
            </div>
          </fieldset></br>
          <span v-if="info.name.includes('Stereo')">
            <button v-on:click="onstartStereo">Start {{info.name}}</button>
          </span>
          <span v-if="info.name.includes('RGB')">
            <button v-on:click="onstartColor">Start {{info.name}}</button>
          </span>
          </fieldset>
          </br>
          </br>
        </div>
      </div>
      <div v-else>
        <textarea>No sensor info!</textarea>>
      </div>
    </fieldset>
    <span>
      <canvas id="color-canvas" v-bind:width="canvasData.width['color']" v-bind:height="canvasData.height['color']" v-show="canvasData.display['color']"></canvas>
      <canvas id="depth-canvas" v-bind:width="canvasData.width['depth']" v-bind:height="canvasData.height['depth']" v-show="canvasData.display['depth']"></canvas>
      <canvas id="infrared1-canvas" v-bind:width="canvasData.width['infrared1']" v-bind:height="canvasData.height['infrared1']" v-show="canvasData.display['infrared1']"></canvas>
      <canvas id="infrared2-canvas" v-bind:width="canvasData.width['infrared2']" v-bind:height="canvasData.height['infrared2']" v-show="canvasData.display['infrared2']"></canvas>
    </span>
  </div>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>
